@import "../common/vars.scss";
@import "../mixins/mixins.scss";
//隐藏原始的
.aiui-form input[type=checkbox] {
    display: none;
  }
  @include create(checkbox) {
    color: $checkbox-color;
    font-weight: $checkbox-font-weight;
    line-height: 1;
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    outline: none;
    font-size: $font-size-base;
    //带边框
    @include when(bordered) {
      padding: $checkbox-bordered-padding;
      border-radius: $border-radius-base;
      border: $border-base;
      box-sizing: border-box;
      height: $checkbox-bordered-height;
      background: $fill-base;
      &.is-checked {
        border-color: $color-primary;
      }
      &.is-disabled {
        cursor: not-allowed;
        border-color: $border-color-lighter;
      }
    }
  
    & + & {
      margin-left: 10px;
    }
    //input样式
    @include e(input) {
      white-space: nowrap;
      cursor: pointer;
      outline: none;
      display: inline-block;
      line-height: 1;
      position: relative;
      vertical-align: middle;
    }
  
    //input-inner样式
    @include e(input-inner) {
      display: inline-block;
      position: relative;
      border: $checkbox-input-border;
      border-radius: $checkbox-input-border-radius;
      box-sizing: border-box;
      width: $checkbox-input-width;
      height: $checkbox-input-height;
      background-color: $checkbox-input-fill;
      transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
      background-color .25s cubic-bezier(.71,-.46,.29,1.46);
  
      &:hover {
        border-color: $checkbox-input-border-color-hover;
      }
  
      &::after {
        box-sizing: content-box;
        content: "";
        border: 1px solid $checkbox-checked-icon-color;
        border-left: 0;
        border-top: 0;
        height: 7px;
        left: 4px;
        position: absolute;
        top: 1px;
        transform: rotate(45deg) scaleY(0);
        width: 3px;
        transition: transform .15s ease-in .05s;
        transform-origin: center;
      }
    }
  
    //禁用样式
    @include when(disabled) {
      .aiui-checkbox-input-inner {
          background-color: $checkbox-disabled-input-fill;
          border-color: $checkbox-disabled-input-border-color;
          cursor: not-allowed;
  
          &::after {
            cursor: not-allowed;
            border-color: $checkbox-disabled-icon-color;
          }
  
          & .aiui-checkbox-label {
            cursor: not-allowed;
          }
        }
  
        &.is-checked {
              .aiui-checkbox-input-inner {
                  background-color: $checkbox-disabled-checked-input-fill;
                  border-color: $checkbox-disabled-checked-input-border-color;
  
                  &::after {
                      border-color: $checkbox-disabled-checked-icon-color;
                  }
              }
          }
      & span.aiui-checkbox-label {
          color: $color-text-placeholder;
          cursor: not-allowed;
          }
    }

    @include when(indeterminate){
      .aiui-checkbox-input-inner{
        background-color: $checkbox-checked-input-fill;
        border-color: $checkbox-checked-input-border-color;
        &::before{
          content: "";
          position: absolute;
          display: block;
          background-color: #fff;
          height: 2px;
          transform: scale(.5);
          left: 0;
          right: 0;
          top: 5px;
        }
      }
    }
    //选中样式
    @include when(checked) {
      .aiui-checkbox-input-inner {
          background-color: $checkbox-checked-input-fill;
          border-color: $checkbox-checked-input-border-color;
  
          &::after {
              transform: rotate(45deg) scaleY(1);
          }
        }
  
        & .aiui-checkbox-label {
          color: $checkbox-checked-text-color;
        }
    }
  
    &:focus:not(.is-focus):not(:active):not(.is-disabled) {
      /*获得焦点时 样式提醒*/
      .aiui-checkbox-input-inner {
        box-shadow: 0 0 2px 2px $checkbox-input-border-color-hover;
      }
    }
  
    @include e(label) {
      font-size: $checkbox-font-size;
      padding-left: 10px;
    }
  }
  @include create(checkbox-group){
      display: inline-block;
      line-height: 1;
      vertical-align: middle;
      font-size: 0;
      .aiui-checkbox{
        margin: 0px;
        border-radius: 0px;
        border-right: none;
        .aiui-checkbox-input{
          display: none;
        }
        @include when(checked){
          background: $checkbox-group-checkbox-backgroud;
          .aiui-checkbox-label{
            color: $color-white;
          }
          & + .aiui-checkbox{
            border-left-color: $color-white;
          }
          &.is-disabled + .aiui-checkbox{
            border-left-color: $border-color-lighter;
          }
        }
        &:first-child{
          border-top-left-radius: $border-radius-base;
          border-bottom-left-radius: $border-radius-base;
        }
        &:last-child{
          border-top-right-radius: $border-radius-base;
          border-bottom-right-radius: $border-radius-base;
          border-right: $border-base;
        }
        @include when(disabled){
          background:$fill-base;
          .aiui-checkbox-label{
            color: $color-text-placeholder;
          }
          &+.aiui-checkbox{
            border-color: $border-color-lighter;
          }
        }
    }
  }